<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../plugins/jquery-2.1.0.js"></script>
		<script src="../plugins/element-ui/vue.js"></script>
		<script src="../plugins/element-ui/index.js"></script>
		<script src="../plugins/ComUtil.js"></script>
		<script src="js/yIndex.js"></script>
		<link rel="stylesheet" href="../plugins/element-ui/index.css" / />
		<link rel="stylesheet" href="css/mainIndex.css" / />
		<title></title>
		<style>
			#cg_page {
				width: 600px;
			}
		</style>
		<style>
			.cg_div {
				width: calc(100% - 20px);
				padding: 10px;
				display: flex;
				border-bottom: 1px solid #EBEEF5;
			}
			
			.cg_detail {
				width: calc(100% - 80px);
			}
			
			.cg_title {
				font-size: 16px;
				font-family: ms sans serif, arial;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: #605AE0;
			}
			
			.cg_title:hover {
				cursor: pointer;
				text-decoration: underline;
				color: #5292F7;
			}
			
			.cg_img {
				width: 80px;
				margin-top: 20px;
			}
			
			.cg_img img {
				width: 80px;
				height: 80px;
			}
			
			.cg_imgs:hover {
				cursor: pointer;
				-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			}
			
			.cg_div:hover {
				background-color: #F5F8FB;
			}
			
			.cg_cjsj,
			.cg_cjr {
				font-size: 14px;
				color: #A6A9AD;
			}
			
			.cg_content {
				width: calc(100% - 30px);
				font-size: 13px;
			}
			
			.cg_img_p {
				display: none;
			}
			.cg_yrxx{
			}
			.cg_tags{
				height: 25px;
			}
			.cg_tag{
				margin-left: 15px;
				padding: 3px 6px 3px 6px;
				float: left;
				background-color: #F7F7F7;
			}
			.cg_zdtag{
				color: #C81F1F;
			}
			.cg_cjr_span2{
				
			}
			.cg_jg{
				margin-top: 10px;
			}
			.cg_data{
				display: none;
			}
		</style>
	</head>

	<body>
		<div style="" id="cg_page">
			<div class="cg_div">
				<div class="cg_detail">
					<div class="cg_title cg_jg" cg_data="asdasdas" title="">
						 孤岛西区(实例库)
					</div>
					<div class="cg_yrxx cg_jg">
						<div class="cg_cjr">
							<span>创建人：</span>
							<span class="cg_cjr_span1">程瑞</span>
						</div>
						<div class="cg_cjsj ">
							<span>创建时间：</span>
							<span class="cg_cjr_span2">2010-20-30</span>
						</div>
					</div>
					<div class="cg_content cg_jg">
						邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投产，初期平均单井日油能力为72.5t/d，气油比为36.6m3/t，目前(2007年8月)平均单井日油能力为56.5t/d，气油比为56m3/t。
					</div>
					<div class="cg_tags cg_jg">
						<div class="cg_tag" style="margin: 0px;">
							科学技术研究
						</div>
						<div class="cg_tag">
							页岩气
						</div>
						<div class="cg_tag">
							水平井
						</div>
						<div class="cg_tag cg_zdtag" >
							川南南海研究
						</div>
					</div>

				</div>
				<div class="cg_img" dqcg_parm="">
					<img class="cg_imgs" src="TestImg/gd01.jpg" />
					<p class="cg_img_p"></p>
				</div>
			</div>
			<div class="cg_div">
				<div class="cg_detail">
					<div class="cg_title cg_jg" cg_data="asdasdas" title="">
						孤岛西区馆3-4(实例库)
					</div>
					<div class="cg_yrxx cg_jg">
						<div class="cg_cjr">
							<span></span>
							<span class="cg_cjr_span1">程瑞</span>
						</div>
						<div class="cg_cjsj ">
							<span></span>
							<span class="cg_cjr_span2">2010-20-30</span>
						</div>
					</div>
					<div class="cg_content cg_jg">
						孤岛西区馆3-4(实例库)
					</div>
					<div class="cg_tags cg_jg">
						<div class="cg_tag" style="margin: 0px;">
							科学技术研究
						</div>
						<!--<div class="cg_tag cg_zdtag" >
							川南南海研究
						</div>-->
					</div>

				</div>
				<div class="cg_img" dqcg_parm="">
					<img class="cg_imgs" src="TestImg/gd01.jpg" />
					<p class="cg_img_p"></p>
				</div>
			</div>
			<div class="cg_div">
				<div class="cg_detail">
					<div class="cg_title cg_jg" cg_data="asdasdas" title="">
						桩3-202(实例库)
					</div>
					<div class="cg_yrxx cg_jg">
						<div class="cg_cjr">
							<span></span>
							<span class="cg_cjr_span1">程瑞</span>
						</div>
						<div class="cg_cjsj ">
							<span></span>
							<span class="cg_cjr_span2">2010-20-30</span>
						</div>
					</div>
					<div class="cg_content cg_jg">
						邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投产，初期平均单井日油能力为72.5t/d，气油比为36.6m3/t，目前(2007年8月)平均单井日油能力为56.5t/d，气油比为56m3/t。
					</div>
					<div class="cg_tags cg_jg">
						<div class="cg_tag" style="margin: 0px;">
							近的KD34
						</div>
						<div class="cg_tag">
							才有其
						</div>
						<div class="cg_tag">
							油井
						</div>
						<div class="cg_tag cg_zdtag" >
							井组油井生产井数
						</div>
					</div>
					<!--<div class="cg_btm">
						<p>成果</p>
					</div>-->
				</div>
				<div class="cg_img" dqcg_parm="">
					<img class="cg_imgs" src="TestImg/gd01.jpg" />
					<p class="cg_img_p"></p>
				</div>
			</div>
		</div>
		<script>
			$.ajax({
				type: "get",
				url: "test.json",
				success: function(res) {
					var cg_lis = "";
					rst_lst = res.rows;
					for(var i = 0; i < rst_lst.length; i++) {
						cg_lis += '<div class="cg_div">'
				+'<div class="cg_detail">'
				+	'<div class="cg_title cg_jg" cg_data="' + rst_lst[i].id + '" title="' + rst_lst[i].achmc + '">'
				+		rst_lst[i].achmc 
				//+'<p class="cg_data">' + rst_lst[i].id + '</p>'
				+	'</div>'
				+	'<div class="cg_yrxx cg_jg">'
				+		'<div class="cg_cjr">'
				+			'<span>创建人：</span>'
				+			'<span class="cg_cjr_span1">' + rst_lst[i].cjr + '</span>'
				+		'</div>'
				+		'<div class="cg_cjsj ">'
				+			'<span>创建时间：</span>'
				+			'<span class="cg_cjr_span2">' + rst_lst[i].cjsj + '</span>'
				+		'</div>'
				+	'</div>'
				+	'<div class="cg_content cg_jg">'
				+		rst_lst[i].achmc 
				//+		'邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投邻近的KD34井区KD34A井组油井生产井数7口，2005年10月投产，初期平均单井日油能力为72.5t/d，气油比为36.6m3/t，目前(2007年8月)平均单井日油能力为56.5t/d，气油比为56m3/t。'
				+	'</div>'
				+	'<div class="cg_tags cg_jg">'
				+		'<div class="cg_tag" style="margin: 0px;">'
				+			'科学技术研究'
				+		'</div>'
				+		'<div class="cg_tag">'
				+			'页岩气'
				+		'</div>'
				+		'<div class="cg_tag">'
				+			'水平井'
				+		'</div>'
				+		'<div class="cg_tag cg_zdtag" >'
				+			'川南南海研究'
				+		'</div>'
				+	'</div>'

				+'</div>'
				+'<div class="cg_img" dqcg_parm="' + rst_lst[i].id + '">'
				+	'<img class="cg_imgs" src="' + rst_lst[i].cglj + '" />'
				+	'<p class="cg_img_p"></p>'
				+'</div>'
			+'</div>';
					}
					$("#cg_page").append(cg_lis);
					$(".cg_title").on('click', function() {
						var ss = $(this).attr("cg_data");
						console.log(ss);
					})

					$(".cg_imgs").on('click', function() {
						//	let cg_parm = $(this).parent().attr("dqcg_parm");
						let cg_parm = $(this).parent().attr("dqcg_parm");
						console.log(cg_parm);

					})
				}
			});
		</script>
	</body>

</html>